<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="css/menu1.css" />
		<title>练习02 实现菜单的收缩与扩展</title>
	</head>

	<body>
		<div id="leftNav" class="left-nav">
			<div id="myMenu" class="menuBox">
				<ul class="spMenuBox">
					<li class="spMenuItem active">
						<div class="spMenu">
							<i id="Oi" class="fa fa-folder-open"></i>
							<span>菜单1</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: block;">
							<li><span class="subMenu">菜单1.1</span></li>
							<li><span class="subMenu">菜单1.2</span></li>
							<li><span class="subMenu">菜单1.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i id="Oi" class="fa fa-folder"></i>
							<span>菜单2</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
							<li><span class="subMenu">菜单2.1</span></li>
							<li><span class="subMenu">菜单2.2</span></li>
							<li><span class="subMenu">菜单2.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i id="Oi" class="fa fa-folder"></i>
							<span>菜单3</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
							<li><span class="subMenu">菜单3.1</span></li>
							<li><span class="subMenu">菜单3.2</span></li>
							<li><span class="subMenu">菜单3.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i id="Oi" class="fa fa-folder"></i>
							<span>菜单4</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单4.1</span></li>
							<li><span class="subMenu">菜单4.2</span></li>
							<li><span class="subMenu">菜单4.3</span></li>
						</ul>
					</li>
					<li class="spMenuItem">
						<div class="spMenu">
							<i id="Oi" class="fa fa-folder"></i>
							<span>菜单5</span>
							<i class="fa fa-2x fa-angle-down"></i>
						</div>
						<ul class="subMenuBox" style="display: none;">
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
							<li><span class="subMenu">菜单5.1</span></li>
							<li><span class="subMenu">菜单5.2</span></li>
							<li><span class="subMenu">菜单5.3</span></li>
						</ul>
					</li>
				</ul>
			</div>
		
		</div>
	</body>
	<script>
		// 189000401 邓玉石
		let property = true
		let ListLi = document.querySelectorAll('.spMenuItem')
		let ListUl = document.querySelectorAll('.spMenuItem .subMenuBox')
		let ListOi = document.querySelectorAll('#Oi')
		for(let i = 0;i < ListLi.length;i ++){
			ListLi[i].onclick = function(){
				if(property){
					ListLi[i].className = 'spMenuItem'
					ListUl[i].style.display = 'none'
					ListOi[i].className = 'fa fa-folder'
				}else{
					ListLi[i].className = 'spMenuItem active'
					ListUl[i].style.display = 'block'
					ListOi[i].className = 'fa fa-folder-open'
				}
				property = !property
			}
		}
	</script>

</html>
